<template>
  <div class="page">
    <div class="page_top ai-margin-bottom ai-border-bottom">
      <div class="cont ai-margin-tb-sz  ai-margin-lr">
        <div class="cont_left">
          <el-input size="small" v-model="type" placeholder="请输入添加设备类型" style="width: 200px;" class="filter-item"
                    @keyup.enter.native="handleAddType"/>
          <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="handleAddType">
            添加设备类型
          </el-button>
        </div>
        <div class="cont_right">
        </div>
      </div>
    </div>
    <div class="page_bottom">
      <el-tabs type="border-card" class="ai-margin">
        <el-tab-pane class="m-display" label="设备类型管理">
          <div class="ai-display-ib" v-for="tag in dynamicTags">
              <el-tag
                @mouseleave="handleMouseleave(tag.id)"
                @mouseenter="handleMouseenter(tag.id)"
                @click="handleEditorType(tag)"
                :key="tag.id"
                closable
                :disable-transitions="false"
                @close="handleDelete(tag)">
                {{tag.type}}
              </el-tag>
          </div>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加类型</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="修改" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="被修改的类型：">
          <el-tag>{{form.type}}</el-tag>
        </el-form-item>
        <el-form-item label="类型修改为：" prop="newType">
          <el-input v-model="form.newType" placeholder="请输入类型"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditor('form')">保 存</el-button>
              </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    createEquipmentType,
    deleteEquipmentType,
    deleteEquipmentTypeById,
    getEquipmentType,
    updateEquipmentType
  } from "../../api/equipment";

  export default {
    name: "equipmentType",
    data() {
      return {
        inputVisible: false,
        inputValue: '',
        dynamicTags: [],
        type: "",
        current: "",
        dialogVisible: false,
        form: {
          id: "",
          type: "",
          newType: "",
        },
        rules: {
          newType: [{required: true, message: "修改内容不能为空", trigger: 'blur'}]
        }
      }
    },
    mounted() {
      this.handleContent()
    },
    methods: {
      /**
       *
       * 获取所有类型
       */
      handleContent() {
        getEquipmentType()
          .then(rsp => {
            console.log(rsp)
            this.dynamicTags = rsp.result;
          })
          .catch(respond => {
            console.log(respond)
          })
      },
      /**
       * 添加类型
       */
      handleAddType() {
        console.log(this.type)
        if (this.type === null || this.type === "") {
          this.$message.warning("添加的设备类型不能为空")
        } else {
          createEquipmentType(this.type)
            .then(rsp => {
              this.$message.success(rsp.msg)
              this.handleContent();
              this.type = "";
            })
            .catch(respond => {
              this.$message.warning(respond.msg)

            })
        }
        ;
      },
      /**
       * 删除类型
       * @param id 类型id
       */
      handleDelete(tag) {
        this.$confirm(`此操作将永久删除 ${tag.type} , 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteEquipmentTypeById(tag.id)
            .then(rsp => {
              console.log(rsp)
              this.$message.success(rsp.msg);
              this.handleContent();
            })
            .catch(respond => {
              this.$message.warning(respond.msg)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        console.log(id)
      },
      handleMouseleave(id) {
        this.current = ""
      },
      handleMouseenter(id) {
        this.current = id
      },
      handleEditorType(row) {
        this.dialogVisible = true;
        this.form = row;
        console.log(row)
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      /**
       * 动态添加标签
       */
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          createEquipmentType(inputValue)
            .then(rsp => {
              this.$message.success(rsp.msg)
              this.handleContent();
              this.type = "";
            })
            .catch(respond => {
              this.$message.warning(respond.msg)

            })
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      /**
       * 修改类型
       * @param form
       */
      handleEditor(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {

            updateEquipmentType(this.form.id, this.form.newType)
              .then(rsp => {
                console.log(rsp)
                this.$message.success(rsp.msg)
                this.handleContent();
                this.dialogVisible = false;
              })
              .catch(reason => {
                console.log(reason)
              })
          } else {
            this.$message.warning("修改的内容不能为空")
          }
          ;
        })
      }
    }
  };
</script>
<style scoped lang="scss">
  .page {
    width: 95%;
    margin: 0 auto;

    .page_top {
      .cont {
        display: flex;
        flex-direction: row;
        margin: 30px 0px;

        .cont_left {
          flex: 1;

          .cont_input {
            width: 220px;
            margin-right: 10px;
          }
        }

        .cont_right {
          flex: 1;
          display: flex;

          .cont_input {
            width: 220px;
            margin-right: 20px;
          }
        }
      }
    }
  }

  .m-display {
    display: flex;

    .ai-display-ib {
      margin: 10px;
    }
  }
  .button-new-tag {
    margin-left: 10px;
    margin-top: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    margin-top: 10px;
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

